<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>工序管理</el-breadcrumb-item>
      <el-breadcrumb-item>工序详情</el-breadcrumb-item>
    </el-breadcrumb>
    <!--标题-->
    <el-row class="box2">
      <h1 class="title">工序详情界面</h1>
    </el-row>
    <!--中间间隔-->
    <el-row class="box"></el-row>
    <!--卡片视图-->
    <el-card class="box-card">
      <el-form :model="addForm" status-icon :rules="rules" >
        <el-row>
          <el-col :span="12">
            <el-form-item label="工序编号">
              <el-input disabled="disabled" v-model="addForm.code"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工序名称" prop="name">
              <el-input disabled="disabled" v-model="addForm.name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="收费方式">
              <el-select disabled="disabled" v-model="addForm.ctype" placeholder="请选择活动区域">
                <el-option label="按时间（分钟）" :value="0"></el-option>
                <el-option label="按面积（m^2）" :value="1"></el-option>
                <el-option label="按重量（kg）" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="单价" prop="price">
              <el-input disabled="disabled" v-model="addForm.price"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="准备工时单价" prop="prePrice">
              <el-input disabled="disabled" v-model="addForm.prePrice"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="工序介绍">
              <el-input disabled="disabled" type="textarea" :rows="4" placeholder="请输入描述" v-model="addForm.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="goback()" type="primary">返回</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "proDes",
      data(){
        var checkName = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('工序名称不能为空'));
          }else {
            callback();
          }
        };
        var checkPrice = (rule, value, callback) => {
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              callback();
            }
          }, 2000);
        };
        var checkPrice2 = (rule, value, callback) => {
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              callback();
            }
          }, 2000);
        };
        return{
          addForm:{},
          newid:"",
          rules: {
            name: [
              { validator: checkName, trigger: 'blur' }
            ],
            price: [
              { validator: checkPrice, trigger: 'blur' }
            ],
            PrePrice: [
              { validator: checkPrice2, trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
        goback(){//返回
          this.$router.push('/process');
        },
        hx(){//根据id查询对应工序的信息，返回显示
          this.$http.post("/pro/getById/"+this.newid).then((res) => {
            debugger
            if (res.data.success) {
              this.addForm=res.data.result;
              this.$message({
                message:res.data.message,
                type:"success"
              })
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        reset(){//重置
          this.addForm={};
        },
      },
      mounted() {
        this.newid=this.$route.query.id;//$route路由接收列表传来的值
        this.hx();
      }
    }
</script>

<style scoped>
  .box2{/*添加界面的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .box{/*中间的间隔*/
    height: 20px;
    background-color: #eaedf1;
  }
  .title{
    line-height:2.3px;
    text-align: center;
  }
</style>
